<template>
  <div>
    <img :src="imgs" alt="" />
    <el-dialog title="上传新头像" :visible.sync="hdialogVisible" width="700px">
      <div class="set-avatar-container">
        <div class="avatar-head">
          <el-upload
            class="avatar-uploader"
            action
            list-type="picture"
            data-sdfsd="nihao"
            :show-file-list="false"
            :http-request="customUpload"
          >
            <div class="upload">
              <span class="el-icon-upload"></span>
              请选择要上传的图片
            </div>
          </el-upload>
        </div>
        <div class="avatar-container">
          <div class="cropper-box">
            <vue-cropper
              ref="cropper2"
              :img="example2.img"
              :output-size="example2.size"
              :output-type="example2.outputType"
              :info="example2.info"
              :can-move="example2.canMove"
              :fixed-box="example2.fixedBox"
              :center-box="example2.centerBox"
              :can-scale="example2.canScale"
              :auto-crop="example2.autoCrop"
              :auto-crop-width="example2.autoCropWidth"
              :auto-crop-height="example2.autoCropHeight"
              :fixed="example2.fixed"
              :fixed-number="example2.fixedNumber"
              @realTime="realTime"
            ></vue-cropper>
          </div>
          <div class="show-preview">
            <div :style="previews.div" class="preview">
              <img :src="previews.url" :style="previews.img" />
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="hdialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="getBase64Url">确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <div>
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="140px"
        class="demo-ruleForm"
      >
      </el-form>
    </div>
  </div>
</template>
<script>
import { VueCropper } from "vue-cropper";
import api from "../api";
export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      hdialogVisible: true,
      previews: {},
      ruleForm: {
        head_image: "",
      },
      imgs: "",
      dialogFormVisible_two_img: false, //截图弹框控制
      example2: {
        img: "", //裁剪图片的地址
        outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
        outputType: "png", //裁剪生成图片的格式（jpeg || png || webp）
        info: true, //图片大小信息
        canScale: true, //图片是否允许滚轮缩放
        autoCrop: true, //是否默认生成截图框
        autoCropWidth: 400, //默认生成截图框宽度
        autoCropHeight: 400, //默认生成截图框高度
        fixed: true, //是否开启截图框宽高固定比例
        fixedNumber: [1, 1], //截图框的宽高比例
        full: false, //false按原比例裁切图片，不失真
        fixedBox: false, //固定截图框大小，不允许改变
        canMove: false, //上传图片是否可以移动
        canMoveBox: true, //截图框能否拖动
        original: false, //上传图片按照原始比例渲染
        centerBox: true, //截图框是否被限制在图片里面
        height: true, //是否按照设备的dpr 输出等比例图片
        infoTrue: false, //true为展示真实输出图片宽高，false展示看到的截图框宽高
        maxImgSize: 3000, //限制图片最大宽度和高度
        enlarge: 1, //图片根据截图框输出比例倍数
        mode: "230px 150px", //图片默认渲染方式
      },
      isonSiteMap: false,
    };
  },
  methods: {
    customUpload(res) {
      let that = this;
      var reader = new FileReader();
      reader.readAsArrayBuffer(res.file);
      reader.onload = function(e) {
        var bf = this.result;
        var blob = new Blob([bf], { type: "text/plain" });
        var str = URL.createObjectURL(blob);
        that.hdialogVisible = true;
        that.example2.img = str;
        console.log(str);
      };
    },
    //实时预览函数
    realTime(data) {
      console.log(data);
      this.previews = data;
    },
    // blob转base64
    blobToBase64(blob, callback) {
      var a = new FileReader();
      a.onload = function(e) {
        callback(e.target.result);
      };
      a.readAsDataURL(blob);
    },
    // 获取图片链接
    getBase64Url() {
      let that = this;
      this.$refs.cropper2.getCropBlob((res) => {
        this.blobToBase64(res, (data) => {
          that.imgs = data;
        });
      });
      this.hdialogVisible = false;
    },
  },
};
</script>
<style scpoed>
.set-avatar-container {
  width: 500px;
}
.avatar-head {
}
.upload {
  position: relative;
  width: 160px;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 4px 10px;
  color: #666;
  background: #fff;
  border-color: #e7e9eb;
  height: 32px;
  border: 1px solid #3d86fe;
  border-radius: 4px;
}
.upload .el-icon-upload {
  color: #3d86fe;
  margin-right: 4px;
  font-size: 16px;
}
.upload::before {
  position: absolute;
  right: -180px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  content: "一周内仅支持修改两次头像";
}
.set-avatar-container {
  width: 100%;
}
.avatar-container {
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.cropper-box {
  height: 300px;
  width: 300px;
}
.show-preview {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  border: 1px solid #f7f8f9;
  margin-right: 70px;
}
.preview {
  overflow: hidden;
  border: 1px solid #67c23a;
  background: #cccccc;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
